<!-- 订单信息 -->
<template>
  <view class="order-info" @click="emit('btnClick', itemData)">
    <view class="title d-flex">
      <text class="siyuan-medium show-one-overflow">{{ itemData.productName }}</text>
      <text class="pay-status">{{ itemData.orderStatus == -1 ? '已取消': orderStatus[itemData.orderStatus] }}</text>
    </view>
    <view class="cell" v-if="itemData.productType == 1">
      活动时间：
      <text class="intel-one-mono-regular">{{ itemData.startTime?itemData.startTime.split(" ")[0]:''}}</text>
    </view>
    <view class="cell">
      订单时间：
      <text class="intel-one-mono-regular">{{ itemData.orderTime }}</text>
    </view>
    <view class="cell" v-if="itemData.productType != 1">
      订单金额：￥
      <text class="intel-one-mono-regular">{{ itemData.orderPrice }}</text>
    </view>
    <view class="order-number">
      订单编号：
      <text class="intel-one-mono-regular">{{ itemData.orderNo || "A0293728832987" }}</text>
    </view>
    <button class="black-btn" v-if="btnName" :class="btnClass">
      {{ btnName }}
    </button>
  </view>
</template>

<script setup>
import { ref } from "vue";

const props = defineProps({
  btnName: {
    type: String,
    default: "",
  },
  btnClass: {
    type: String,
    default: "",
  },
  pageName: {
    type: String,
    default: "",
  },
  itemData: {
    type: Object,
    default: {
      orderStatus: 0,
      productName: "美院夜游班 第四期",
      productType: 1,
    },
  },
});
let emit = defineEmits(["btnClick"]);
let orderStatus = ref(["待支付", "支付成功", "已核销", "已申请退款", "退款成功","已过期"]); // 0=待支付、1=支付成功、2=已核销、3=已申请退款、4=退款成功 5=已过期）
</script>

<style lang="scss" scoped>
.order-info {
  position: relative;
  width: 100%;
  padding: 26rpx 30rpx 34rpx;
  .title {
    margin-bottom: 18rpx;
    align-items: center;
    justify-content: space-between;
    font-size: 26rpx;
    text:first-child {
      flex: 1;
    }
    text.pay-status {
      font-size: 24rpx;
    }
  }
  .cell {
    font-size: 24rpx;
    line-height: 26rpx;
    text {
      display: inline-block;
    }
  }
  .order-number {
    margin-top: 40rpx;
    font-size: 18rpx;
    color: #c9caca;
    text {
      display: inline-block;
      margin-left: 6rpx;
      color: #c9caca;
    }
  }
  .black-btn {
    position: absolute;
    bottom: 24rpx;
    right: 32rpx;
    width: 100rpx;
    height: 36rpx;
    line-height: 36rpx;
    font-size: 24rpx;
  }
  .black-btn.small-btn {
    width: 78rpx;
  }
}
</style>
